<template>
  <div class="pad-t-20">
    <el-form ref="userForm" :model="user" :rules="rules" label-position="right" label-width="120px" class="user-form">
      <el-form-item label="操作员姓名" prop="username">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input v-model="user.username" :disabled=true></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="登录手机号" prop="phone">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input v-model="user.phone"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="旧密码" prop="password">
        <el-input v-model="user.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="user.newPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="绑定第三方账号" v-if="false">
        <el-row :gutter="20">
          <el-col :span="7">
            <div class="bind-bar align-c pad-t-12 pad-b-12">
              <div class="flex v-align-c">
                <span class="logo-biz"></span>
                <span class="change-icon mar-l-20 mar-r-20"></span>
                <span class="logo-1"></span>
                <el-button :type="bindWechatClass" class="bind-btn mar-l-20" @click="showWechatCode">{{bindWechatText}}</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: left;margin-left: 50px;">
      <el-button type="primary" @click="saveData">保存</el-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .user-form{
    width: 90%;
    box-sizing: border-box;
    padding-left:50px;
    .bind-bar{
      background: #f2f2f2;
      border-radius: 5px;
      text-align: center;
      span, .bind-btn{
        display: inline-block;
        vertical-align: middle;
      }
      .change-icon{
        background:url('../../../../assets/images/bind-change.png') no-repeat;
        width: 33px;
        height: 33px;
        cursor: pointer;
      }
      .logo-biz{
        background:url('../../../../assets/images/bind-logo.png') no-repeat;
        width: 46px;
        height: 46px;
      }
      .logo-1{
        background:url('../../../../assets/images/bind-logo-1.png') no-repeat;
        width: 49px;
        height: 49px;
      }
      .logo-2{
        background:url('../../../../assets/images/bind-logo-2.png') no-repeat;
        width: 50px;
        height: 50px;
      }
      .logo-3{
        background:url('../../../../assets/images/bind-logo-3.png') no-repeat;
        width: 45px;
        height: 51px;
      }
    }
  }
</style>

<script>
  import { saveUser, getUser } from '@/api/system/user'
  import { getNameByPath } from '@/utils/get-name-by-path' // 不要删除，根据URL获取文件名

  export default {
    name: getNameByPath(),
    data() {
      return {
        user: {
          status: 1
        },
        rules: {
          phone: [
            { required: true, message: '手机号不能为空', trigger: 'blur' }
          ],
          newPassword: [
          ]
        },
        data: [],
        bindWechatClass: 'primary',
        bindWechatText: '立即关联',
        wechatUrl: ''
      }
    },
    // 初始化页面
    created() {
      this.getSubUser(this.getUserId())
    },
    methods: {
      getSubUser(subUserId) {
        getUser(subUserId).then(response => {
          if (response.isError) return
          this.user = response.data
          this.bindWechatClass = this.user.unionId ? 'danger' : 'primary'
          this.bindWechatText = this.user.unionId ? '解除关联' : '立即关联'
        })
      },
      // 保存用户信息
      saveData() {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            saveUser(this.user).then((response) => {
              if (response.isError) {
                return
              }
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
            })
          }
        })
      },
      showWechatCode() {
        const redirectUrl = encodeURIComponent('https://e.joinsun.vip/api/system/user/wechat/auth')
        const stat = 'wx597837043c592bdc:' + (this.user.unionId ? 'unbind:' : 'bind:') + this.user.subUserId
        this.wechatUrl = 'https://open.weixin.qq.com/connect/qrconnect?appid=wx597837043c592bdc&redirect_uri=' + redirectUrl + '&response_type=code&scope=snsapi_login&state=' + stat + '#wechat_redirect'
        window.open(this.wechatUrl)
      }
    }
  }
</script>
